<template>
  <div class="maxbox">
    <div id="app">
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="beijing"
      ></vue-particles>
    </div>
    <!--

    下面介绍参数配置文件 app.js 文件的使用：

    color: String类型。默认'#dedede'。粒子颜色。
    particleOpacity: Number类型。默认0.7。粒子透明度。
    particlesNumber: Number类型。默认80。粒子数量。
    shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
    particleSize: Number类型。默认80。单个粒子大小。
    linesColor: String类型。默认'#dedede'。线条颜色。
    linesWidth: Number类型。默认1。线条宽度。
    lineLinked: 布尔类型。默认true。连接线是否可用。
    lineOpacity: Number类型。默认0.4。线条透明度。
    linesDistance: Number类型。默认150。线条距离。
    moveSpeed: Number类型。默认3。粒子运动速度。
    hoverEffect: 布尔类型。默认true。是否有hover特效。
    hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
    clickEffect: 布尔类型。默认true。是否有click特效。
    clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
    class="beijing" 设置背景图片

    <style lang="less">
    // 这一个部分是插件的哦
    .beijing {
    background-image: url("./start.jpg");
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    </style>
    -->
    <el-form
      status-icon
      label-width="100px"
      class="demo-ruleForm"
      style="text-align: center;margin: 100px auto"
      ref="addUserForm"

    >
      <h1 class="title" >
        <i class="el-icon-menu"></i>
        用户-注册
      </h1>

      <el-form-item label="昵称" prop="uname" style="text-align: center;width: 400px;margin: 40px auto" >
        <el-col :span="24">
          <el-input type="text" v-model="user.uname"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="账号" prop="uphone" style="text-align: center;width: 400px;margin: 40px auto" >
        <el-col :span="24">
          <el-input type="text" v-model="user.uphone"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" prop="upwd" style="text-align: center;width: 400px;margin: 40px auto">
        <el-col :span="24">
          <el-input type="password" v-model="user.upwd" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="邮箱" prop="uemail" style="text-align: center;width: 400px;margin: 40px auto" >
        <el-col :span="24">
          <el-input type="text" v-model="user.uemail"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addUser">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import api from "../../axios/api"
  import qs from 'qs'
  export default {
    name: "registered",
    data() {
      return {
// 登录表单的数据
        user: {
          uname: "",
          uemail: "",
          upwd: "",
          uphone: "",
          type:"",
          modelName:"",
          checked:"",
        },
// // 验证的规则（一份数据）
//         rules: {
// // 验证用户名
//           uname: [
// // 非空验证
//             { required: true, message: "请输入昵称", trigger: "blur" },
//             { min: 2, max: 5, message: "账号长度在 2 - 5 位", trigger: "blur" },
//             { pattern:/^[\u0391-\uFFE5A-Za-z]+$/,message:'厨师名称必须为中文',trigger:'blur'}
//           ],
// // 验证电话
//           uphone: [
// // 非空验证
//             { required: true, message: "请输入账号", trigger: "blur" },
//             { min: 2, max: 5, message: "账号长度在 2 - 5 位", trigger: "blur" }
//           ],
// // 验证密码
//           upwd: [
// // 非空验证
//             { required: true, validator: pass, trigger: "blur" }
//           ],
//
//
//           /*
//           验证规则字段说明：
//           { required: true/false 必填, message: "错误的提示信息", trigger: "触发验证的方式" }
//           { min: 最小长度, max: 最大长度, message: "错误的提示信息", trigger: "触发验证的方式" }
//           { validator： 自定义验证规则函数名， trigger: 'blur'}
//           */
//         }
      };
    },


    methods: {
// 点击登录按钮 触发这个函数
//       submitForm(formName) {
//         var _this = this;
// // 获取表单组件 调用验证方法
//         this.$refs[formName].validate(valid => {
// // 如果所有验证通过 valid就是true
//           if (valid) {
//             //alert("前端验证通过 可以提交给后端！");
//
//
//
// // 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否正确）
// // console.log(params)
// // 直接跳转到后端主页
// // this.$router.push("/");
//
//             //var params = {"username":this.user.username,"upwd":this.user.upwd,"modelName":this.user.modelName};
//             _this.login();
//           } else {
// // 否则就是false
//             alert("前端验证失败 不能提交给后端！");
//             return false;
//           }
//         });
//       },
// 点击重置按钮 触发这个函数
      resetForm(formName) {
// this.$refs.user.resetFields() 获取整个表单组件 调用重置方法
        this.$refs[formName].resetFields();
      },
      addUser:function(){
          console.log( "/api/userController/addUserByUno",this.user,"post")
          console.log( qs.stringify(this.user)+"------------88888-----------")
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/userController/addUserByUno",this.user,"post")
          .then(res=>{
            this.leagues = res.leagues});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      // login(){
      //   console.log( this.user)
      //   console.log( qs.stringify(this.user)+"------------88888-----------")
      //   adduser("/api/userController/addUserByUno",this.user,"post")
      //     .then(dto => {
      //       console.log(dto)
      //       if(dto.code==200){
      //         if(this.user.type==1) {
      //           console.log(dto);
      //           var admin = dto.t;
      //           console.log(admin.ano);
      //           localStorage.setItem('ano', admin.ano);
      //
      //           this.$router.push({
      //             name:"frontuser",//这个name就是你刚刚配置在router里边的name
      //             params: {
      //               ano: admin.ano
      //             }
      //           });
      //         }
      //       }else{
      //         //this.getStudent();
      //       }
      //     });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      // }
    },



  };
</script>
<style scoped>
  .beijing {
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .el-form-item__content{

  }
  .el-form {

    height: 350px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .el-form .el-form-item {

    margin-top: 28px;

  }

  .el-form .el-form-item .el-form-item__label {
    color: #ffffff;
  }

  .el-form .el-form-item .title {
    color: #ffffff;
    padding-left: 40px;
  }
</style>
